<template>
    <div class="auto">
        <el-header class="title">
            案号：{{law.caseNo}}
        </el-header>

        <div class="table">
            <el-table
                    :data="recordFileList"
                    style="width: 70%;margin: 0 auto"
                    :border="true"
                    @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" :selectable="checkState"></el-table-column>
                <el-table-column label="序号" type="index" width="80"></el-table-column>
                <el-table-column
                        prop="fileName"
                        label="模板名称">
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <p style="color: red">
                            {{!checkState(scope.row)?'该文书已经上传了.....':''}}
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <div style="width: 100%;height: 80px;margin-left: 3%">
                <el-button
                        style="margin: 20px 0 0 200px"
                        type="primary"
                        @click="handleBatch">批量生成
                </el-button>
                <el-button
                        style="margin: 20px 0 0 10px"
                        type="primary"
                        @click="goBack">返回
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
    //引入立案文件service
    import {RecordFileService} from "../../../model/gs/RecordFileService";
    import {CaseSealApplyforService} from "../../../model/gs/CaseSealApplyforService";
    //获取实例
    const recordFileService = RecordFileService.getInstance()
    const caseSealApplyforService = CaseSealApplyforService.getInstance()

    export default {
        props: ['law', 'active'],
        data() {
            return {
                recordFileList: [],
                selectRows: [],
                checkedList: []
            }
        },
        methods: {
            goBack() {
                this.$emit('back')
            },
            //表格选中项发生变化执行的方法
            handleSelectionChange(val) {
                this.selectRows = val
            },
            //获取所有文件模板的方法
            getRecordFiles() {
                recordFileService.list().then(response => {
                    if (response.data.code === 0) {
                        this.recordFileList = response.data.data
                    }
                })
            },
            //通过案件查询文书
            getSealApplyforByLaw() {
                this.checkedList = []
                caseSealApplyforService.getByCaseLaw(this.law.id).then(response => {
                    if (response.data.code === 0) {
                        response.data.data.forEach(item => {
                            if (item.applyforApprovalStatus != '2') {
                                this.checkedList.push(item.applyforUsingTheItem)
                            }
                        })
                    }
                })
            },
            //批量生成文书的方法
            handleBatch() {
                //开启加载
                const loadingInstance = this.$loadingPage.service({
                    fullscreen:true,
                    text:'努力生成中，请稍候'
                })
                caseSealApplyforService.saveBatch(this.selectRows, this.law.id).then(response => {
                    if (response.data.code === 0) {
                        this.$message.success('生成成功')
                        this.$emit('completed')
                    }
                    //关闭加载
                    this.$nextTick(() => {
                        loadingInstance.close();
                    });
                })
            },
            //判断是否显示复选框的方法
            checkState(row) {
                return !(this.checkedList.indexOf(row.fileName) > -1);
            }
        },
        created() {
            this.getRecordFiles()
            this.getSealApplyforByLaw()
        },
        watch: {
            active:{
                handler(){
                    if(this.active == 1){
                        this.getSealApplyforByLaw()
                    }
                }
            },
            law:{
                handler(){
                    this.getSealApplyforByLaw()
                },
                deep:true
            }
        }
    }
</script>

<style scoped>
    .auto {
        width: 100%;
        font-size: 20px;
    }

    .table {
        width: 100%;
    }
</style>
